<script setup name="ConProcess">

import ContractList from "@/views/contract/process/contractList.vue";
import {useRoute} from "vue-router";
import {tabFunctions} from "@/utils/tab.js";

const {proxy} = getCurrentInstance()
const route = useRoute()
const {conStatus} = proxy.useDict(["conStatus", true])
const activeTabName = ref('待办')
const data = reactive({
  listStatus: [
    {
      label: '待办', value: '待办'
    },
    {
      label: '已办', value: '已办'
    }
  ]
})
const {listStatus} = toRefs(data)
const contractListRefs = ref([])
const {
  handChangeTab,
  handClickTab,
  loopSetRef
} = tabFunctions(activeTabName, contractListRefs)

onActivated(() => {
  const conStatus = route.query.conStatus
  if (conStatus != null) {
    handChangeTab(conStatus)
  }
})

</script>

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--合同数据-->
      <el-col :span="24" :xs="24">
        <el-tabs v-model="activeTabName" class="demo-tabs" @tab-change="handChangeTab" @tab-click="handClickTab">
          <el-tab-pane v-for="(status, index) in listStatus"
                       :key="status.value"
                       :name="status.value"
                       :label="status.label"
                       lazy
                       style="padding-bottom: 10px;">
            <ContractList :ref="loopSetRef(index)" :status="status.value" :conStatus="conStatus" :listStatus="listStatus"
                     v-if="activeTabName === status.value"/>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>
